<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0,width=device-width">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>m-share</title>
    <style>
        div {
            margin: 30px;
        }
        .actionSheet {
            background: palevioletred;
            color: #fff;
            width: 120px;
        }
    </style>
    <script src="../dist/m-share.js"></script>
</head>
<body>
    <!-- 基础配置 -->
    <h1>基础配置</h1>
	<div class="m-share"></div>
    <!-- 弹层分享 -->
    <h1>弹层分享</h1>
    <button class="actionSheet">点击弹层</button>
    <!-- 指定dom渲染 -->
    <h1>指定dom渲染</h1>
    <div class="myClass"></div>
    
    <!-- js调用 -->
    <h1>js调用分享</h1>
    <button class="shareWx">分享到微信</button>
    <button class="shareWxline">分享到朋友圈</button>
    <button class="shareQq">分享到qq</button>
    <button class="shareQzone">分享到qzone</button>
    <button class="shareSina">分享到微博</button>
    <script>

        var config = {
            title: 'm-share', // 标题，默认读取document.title
            desc: 'm-share的描述', // 描述, 默认读取head标签：<meta name="description" content="desc" />
            link: 'http://www.dearhaoge.com/project/m-share/', // 网址，默认使用window.location.href
            imgUrl: 'http://www.dearhaoge.com/project/m-share/shareIcon.jpg', // 图片, 默认取网页中第一个img标签
            types: ['wx', 'wxline', 'qq', 'qzone', 'sina'], // 开启的分享图标, 默认为全部
            infoMap: {
                wx: {
                    title: 'm-share微信分享',
                    desc: '我是微信的分享',
                    link: 'http://www.dearhaoge.com/project/m-share/?ADTAG=wx',
                    imgUrl: 'http://www.dearhaoge.com/project/m-share/shareIcon.jpg'
                }
            },
            fnDoShare: function (type) {
                console.log(1);
            }
        };
        // 基础配置
        Mshare.init(config);

        // // 指定dom渲染
        Mshare.render(document.querySelector('.myClass'), config);

        // js调用分享
        document.querySelector('.shareWx').addEventListener('click', function () {
            Mshare.to('wx', config);
        });

        document.querySelector('.shareWxline').addEventListener('click', function () {
            Mshare.to('wxline', config);
        });

        document.querySelector('.shareQq').addEventListener('click', function () {
            Mshare.to('qq', config);
        });

        document.querySelector('.shareQzone').addEventListener('click', function () {
            Mshare.to('qzone', config);
        });

        document.querySelector('.shareSina').addEventListener('click', function () {
            Mshare.to('sina', config);
        });

        document.querySelector('.actionSheet').addEventListener('click', function () {
            Mshare.popup(config);
        });

        
    </script>
</body>
</html>